<template>
  <div class="question-info">
    <div class="close-overlay">
      <img src="@/assets/gis/delete.png" @click="hideInfo">
    </div>
    <div class="item" style="padding-left: 80px">
      <div class="questiontitle">问题类型:&nbsp;</div>
      <div class="value">{{ questionInfo.questionType }}</div>
    </div>
    <div class="item" style="padding-left: 80px">
      <div class="questiontitle">任务名称:&nbsp;</div>
      <div class="value">{{ questionInfo.taskName }}</div>
    </div>
    <div class="item" style="margin-bottom: 10px; padding-left: 80px">
      <div class="questiontitle">问题图片:&nbsp;</div>
      <img
        v-for="(item, index) in questionInfo.imgList"
        :key="index"
        :src="item"
        @click="showBigImage(item)"
      >
      <p v-if="!questionInfo.imgList">暂无图片</p>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, watch } from 'vue'
export default {
  name: 'QuestionInfo',
  props: {
    info: {
      type: Object,
      default: () => { }
    }
  },
  emits: ['hide', 'showbig'],
  setup(props, { emit }) {
    const data = reactive({
      questionInfo: {}
    })

    watch(() => props.info, (value) => {
      if (JSON.stringify(value) !== '{}') {
        if (value !== null) {
          let imgRes = []
          if (value?.fileImage) {
            let imgUrl = null
            imgUrl = value?.fileImage
            imgRes = imgUrl.split(',')
          }
          data.questionInfo = {
            questionType: value?.content || null,
            taskName: value?.name || null,
            imgList: imgRes.length ? imgRes : null
          }
        }
      }
    })

    // 大图显示
    const showBigImage = (src) => {
      emit('showbig', src)
    }

    // 隐藏弹框
    const hideInfo = () => {
      emit('hide')
    }

    return {
      ...toRefs(data),
      hideInfo,
      showBigImage
    }
  }
}
</script>

<style lang="scss" scoped>
.question-info {
  background-color: rgba(60, 66, 86, 1);
  border-radius: 6px;
  width: 282px;
  padding: 9px 15px;
  .close-overlay {
    width: 100%;
    height: 9px;
    position: relative;
    cursor: pointer;
    img {
      width: 12px;
      height: 12px;
      position: absolute;
      top: -3px;
      right: -6px;
    };

  }
  .item {
    position: relative;
    font-size: 14px;
    color: #fff;
    padding-left: 90px;
    .title {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 80px;
      text-align: right;
    }
    .questiontitle {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 70px;
      text-align: right;
    }
    .clusterNumber {
      width: 80px;
    }
    img {
      width: 67px;
      height: 37px;
      margin-right: 10px;
      cursor: pointer;
    }
  }
}
</style>

